<template>
    <div class="component-ScoreList">
        <div class="ScoreList-header">
            <!-- <div class="sort-wrap">
                <sort-caret></sort-caret>
                <sort-caret></sort-caret>
            </div>-->
        </div>
        <div class="ScoreList-content">
            <div class="score-item" v-for="item in list" :key="item.examId">
                <p class="title">{{ item.examName }}</p>
                <p>开闭卷：{{ item.openBook ? "闭卷" : "开券" }}</p>
                <p>考试结束时间：{{ item.examEndTime | formatDateTime }}</p>
                <p>答题时长：{{ (item.answerUseTime / 1000) | formatMinute }}分钟</p>
                <p>考试时限：{{ item.answerTimeLimit | formatMinute }}分钟</p>
                <p>满分：{{ item.fullScore || 0 }}分</p>
                <p>成绩：{{ item.studentScore || 0 }}分</p>
                <!-- <p>试卷状态：{{item.studentExamStatus|studentExamStatus}}</p> -->

                <p @click="goAll(item)">答题情况：查看详情</p>
                <p @click="goError(item)">错题：查看详情</p>
                <p @click="goContrast(item)">成绩分析单：查看详情</p>
            </div>
        </div>
    </div>
</template>
<script>
import SortCaret from "@/components/SortCaret";
export default {
    name: "ScoreList",
    props: {
        list: {
            type: Array,
            default: [],
        },
    },
    components: {
        SortCaret,
    },

    data() {
        return {
            allChecked: false,
            checkedList: [],
        };
    },
    watch: {
        allChecked(newval) {
            if (newval) {
                this.$refs.checkboxGroup.toggleAll(true);
            } else {
                this.$refs.checkboxGroup.toggleAll(false);
            }
        },
        checkedList(arr) {
            this.$emit("listChange", arr);
        },
    },
    methods: {
        TabChange(data) {
            this.active = data;
            this.$emit("TabChange", data);
        },
        goError(data) {
            this.$router.push({
                path: "exam-explain",
                query: {
                    examId: data.examId,
                    train: this.$route.query.train ? 1 : 0,
                    type: "answerCorrection=ERROR&answerCorrection=HALF_RIGHT",
                },
            });
        },
        goAll(data) {
            this.$router.push({
                path: "exam-explain",
                query: {
                    examId: data.examId,
                    train: this.$route.query.train ? 1 : 0,
                    type:
                        "answerCorrection=RIGHT&answerCorrection=ERROR&answerCorrection=HALF_RIGHT",
                },
            });
        },
        goContrast(data) {
            this.$router.push({
                path: "/contrast-table",
                query: {
                    examId: data.examId,
                    type: this.$route.query.train ? 2 : 1,
                },
            });
        },
    },
};
</script>
<style lang="scss">
.component-ScoreList {
    padding: 10px 15px;
    flex: 1;
    overflow: scroll;
    display: flex;
    flex-direction: column;

    .ScoreList-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .sort-wrap {
        display: flex;
    }
    .ScoreList-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .score-item {
        border: 1px solid #2e2c3c;
        padding: 15px 11px;
        width: 49%;
        margin-bottom: 15px;
        .title {
            font-size: 15px;
        }
        .van-checkbox {
            margin-bottom: 5px;
        }
        .van-checkbox__label {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            font-size: 12px;
            line-height: 1.8;
        }
    }
}
</style>
